import React from 'react';
import { Checkbox, Button, Toast } from 'antd-mobile';
import styles from './agreement.module.css';
import { observer } from 'mobx-react';
import store from './store';

@observer
class Agreement extends React.Component {
  state = {
    agreed: false
  }

  handleSubmit = () => {
    // const { onSubmit, formData } = this.props;
    const { onSubmit } = this.props;
    const { formData } = store;
    console.log('formData', formData);
    onSubmit(formData)
      .then(() => {
        const agreementNo = `XHT-${new Date().getFullYear()}${new Date().getMonth() + 1}${new Date().getDate()}${new Date().getHours()}${new Date().getMinutes()}${new Date().getSeconds()}-${Math.random().toString(36).substring(2, 10)}`;
        store.agreementNo = agreementNo;
        console.log('store.agreementNo', store.agreementNo);  
      })
  }

  renderPaymentSchedule() {
    const { courseInfo = [] } = store;
    // 确保 courseInfo 是数组
    const courses = Array.isArray(courseInfo) ? courseInfo : [];
    
    return courses.map((course, index) => (
      <React.Fragment key={course.id || index}>
        <div className={styles.subTermContent}>
          {`第 ${index + 1} 次缴费：${course.start_date || '待定'}前，缴费人民币 ${course.price || 0} 元（大写：${this.convertToChinese(course.price || 0)}）`}
        </div>
      </React.Fragment>
    ));
  }

  convertToChinese(num) {
    // 实现数字转中文大写的功能
    // 例如1000，对应壹仟元整
    const chinese = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
    const units = ['元', '拾', '佰', '仟', '万', '亿'];
    const numStr = num.toString();
    let result = '';
    
    for (let i = 0; i < numStr.length; i++) {
      const digit = numStr[i];
      if (digit === '0') {
        if (i === numStr.length - 1) {
          result += '圆';
        }
        continue;
      }
      const unitIndex = numStr.length - i - 1;
      result += chinese[digit] + units[unitIndex];
    }
    return result;
  }

  render() {
    const { agreed } = this.state;
    const { onBack } = this.props;
    const { formData, schoolName, examYear } = store;

    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <h2>课程协议</h2>
        </div>

        <div className={styles.content}>
          {/* 学员信息部分 */}
          <div className={styles.section}>
            <div className={styles.infoGrid}>
              <div className={styles.infoItem}>
                <span>学员姓名：</span>
                <span>{formData.name}</span>
              </div>
              <div className={styles.infoItem}>
                <span>学员类型：</span>
                <span>{formData.student_type}</span>
              </div>
              <div className={styles.infoItem}>
                <span>就读学校：</span>
                <span>{store.schoolName}</span>
              </div>
              <div className={styles.infoItem}>
                <span>身份证号：</span>
                <span>{formData.id_card}</span>
              </div>
              <div className={styles.infoItem}>
                <span>应届高考年份：</span>
                <span>{store.examYear}</span>
              </div>
              <div className={styles.infoItem}>
                <span>家长姓名：</span>
                <span>{formData.parent_name}</span>
              </div>
              <div className={styles.infoItem}>
                <span>联系方式：</span>
                <span>{formData.parent_phone}</span>
              </div>
            </div>
          </div>

          {/* 教育机构信息 */}
          <div className={styles.section}>
            <div className={styles.infoGrid}>
              <div className={styles.infoItem}>
                <span>教育机构：</span>
                <span>上海盟师教育科技有限公司  </span>
              </div>
              <div className={styles.infoItem}>
                <span>地址：</span>
                <span>上海市澳门路168号</span>
              </div>
              <div className={styles.infoItem}>
                <span>联系人：</span>
                <span>朱保中</span>
              </div>
              <div className={styles.infoItem}>
                <span>联系电话：</span>
                <span>13701639896</span>
              </div>
              <div className={styles.infoItem}>
                <span>邮箱：</span>
                <span>110735708@qq.com</span>
              </div>
            </div>
          </div>

          {/* 协议内容 */}
          <div className={styles.agreementContent}>
            <p className={styles.tip}>
              提示：在使用盟师教育提供的课程服务之前，请您先认真阅读本《高考日语在线课程协议》（以下简称"本协议"），在充分理解并同意遵守本协议各条款内容，特别是免除或者限制责任的条款、争议解决条款后再进行本课程服务的购买和使用。免除或者限制责任的条款以加粗字体显示，请您重点阅读。
            </p>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>一、协议确认</h3>
              <div className={styles.termContent}>
                本协议是您（以下简称 "您" 或 "学员"）基于对盟师教育课程服务方式的认可、学习计划的认同，与盟师教育之间就课程服务等相关事宜所订立的契约。
              </div>
              <div className={styles.termContent}>
                请您仔细阅读本协议内容。当您按照本协议提示填写信息、完成课程报名并支付完毕相关课程费用，即表示您已充分阅读、理解并接受本协议的全部内容，本协议即构成对双方有约束力的法律文件。您承诺接受本协议的约束并遵守本协议的约定。届时，您不应以未阅读本协议的内容或者未获得本网站对您问询的解答等理由，主张本协议未生效、无效，或要求撤销本协议。
              </div>
              <div className={styles.termContent}>
                为进一步打造科学教学体系、优化授课效果，在不影响用户正常学习进度、不缩短学习卡的有效期情况下，盟师教育有权对本协议涉及的系统功能、服务体系、课程体系、课程内容等进行调整和升级。若您完成课程报名并支付完毕相关课程费用，即表示您已充分阅读、理解并同意遵守本条款。
              </div>
              <div className={styles.termContent}>
                如果您在 18 周岁以下，则只能在父母或监护人的监护参与下签订协议。若您不具备该主体资格，则您的监护人应承担因此而导致的一切后果。
              </div>
            </div>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>二、课程服务内容</h3>
              <div className={styles.termContent}>
                盟师教育按照学员所在学校的课程安排，派遣经验丰富的日语老师进入学校进行驻校辅导、答疑服务；
              </div>
              <div className={styles.termContent}>
                盟师教育为学员提供寒暑假的在线录播课件学习服务；
              </div>
              <div className={styles.termContent}>
                盟师教育为学员提供社群共学服务（微信 / QQ）；
              </div>
              <div className={styles.termContent}>
                盟师教育定期进行成绩检验（试卷由盟师教育统一命题）及课前测验服务；
              </div>
              <div className={styles.termContent}>
                盟师教育向家长及学校，定期进行学情报告反馈服务。
              </div>
            </div>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>三、保分服务标准</h3>
              <div className={styles.termContent}>
                <div className={styles.subTerm}>
                  <h4 className={styles.subTermTitle}>（一）退费条件</h4>
                  <div className={styles.subTermContent}>
                    如该课程学员同时满足以下全部条件，盟师教育将提供退费的保分服务：
                  </div>
                  <div className={styles.subTermContent}>
                    参加应届高考日语考试（涉及一年两考省份，以最好成绩计入）；
                  </div>
                  <div className={styles.subTermContent}>
                    学员所在该课程班级的班级高考成绩平均分未达到 85 分（满分 150 分），且学员个人成绩未达到 80 分；（如该地区高考日语单科满分非 150 分，保分分数按上述比例折算）
                  </div>
                  <div className={styles.subTermContent}>
                    若学员所在该课程班级的班级高考成绩平均分达到 85 分（满分 150 分），则该班级学员全部不满足退费标准。
                  </div>
                  <div className={styles.subTermContent}>
                    若学员所在该课程班级的班级高考成绩平均分未达到 85 分（满分 150 分），但学员个人成绩达到 80 分，则该学员不满足退费标准；
                  </div>
                  <div className={styles.subTermContent}>
                    特别说明：以上标准仅针对文化生，若学员为艺体生，则在上述保分标准基础上降低 10 分。学员类型以实际参加高考时为准。
                  </div>
                  <div className={styles.subTermContent}>
                    学员学习周期内上课出勤率达到 95%（含）以上；出勤率 = 出勤次数 / 辅导课时数，辅导课时数 = 直播授课课时 + 现场辅导课时；
                  </div>
                  <div className={styles.subTermContent}>
                    学员学习周期内的测试成绩合格率不得低于 90%；合格率 = 学习周期内测试的合格次数 / 学习周期总测试次数，合格成绩为测试所得分数达到试卷总分数的 60%（含）以上；学习周期总测试次数包括但不限于课堂小测、阶段测试、月考及期末考试等正式测试。
                  </div>
                  <div className={styles.subTermContent}>
                    学员需参加完本协议课程服务周期内提供的全部课程，并交纳全部课程辅导费（学员中途退出，将不能享受保分服务）。
                  </div>
                  <div className={styles.subTermContent}>
                    学员出勤率低于 95% 的学员不计算在班级平均分之列。
                  </div>
                </div>
              </div>
              <div className={styles.termContent}>
                <div className={styles.subTerm}>
                  <h4 className={styles.subTermTitle}>（二）退费费用标准</h4>
                  <div className={styles.subTermContent}>
                    如学员满足（一）所列保分条款，且学员高考日语科目分数低于约定个人保分分数 1 分，则盟师教育退还学员 500 元，以此类推，退费金额上限为学员实际支付的辅导费。
                  </div>
                </div>
              </div>
            </div>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>四、费用及相关内容</h3>
              <div className={styles.termContent}>
                <div className={styles.subTerm}>
                  <h4 className={styles.subTermTitle}>费用标准：</h4>
                  <div className={styles.subTermContent}>
                    1.1 辅导费标准：学员购买{Array.isArray(store.courseInfo) ? store.courseInfo.map(c => c.name).join('、') : ''}课程，
                    合计费用人民币：{store.courseTotalPrice || 0} 元
                  </div>
                </div>
              </div>
              <div className={styles.termContent}>
                <div className={styles.subTerm}>
                  <h4 className={styles.subTermTitle}>缴费方式：</h4>
                  <div className={styles.subTermContent}>
                    2.1 缴费时间：
                  </div>
                  <div className={styles.subTermContent}>
                    2.1.1 辅导费缴费时间：
                  </div>
                  {this.renderPaymentSchedule()}
                </div>
              </div>
              <div className={styles.termContent}>
                <div className={styles.subTerm}>
                  <h4 className={styles.subTermTitle}>2.2 如涉及分批次缴费的学员，学员有义务按规定时间进行缴费。如因特殊原因导致的延期缴费，延期不得超过 30 个自然日。如学员延期缴费超过 30 个自然日，则学员的保分条款失效，不再享有保分服务。</h4>
                </div>
              </div>
              <div className={styles.termContent}>
                <div className={styles.subTerm}>
                  <h4 className={styles.subTermTitle}>课程服务周期：自首次缴费之日起至应届高考年份的 6 月 6 日止。</h4>
                </div>
              </div>
            </div>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>五、退费管理</h3>
              <div className={styles.termContent}>
                <div className={styles.subTerm}>
                  <h4 className={styles.subTermTitle}>学员在首次缴费前可进行一次不超过 6 天免费试学，试学满意后进行缴费。学员缴费后，视为对盟师教育的教学计划、服务细则认可。除第五条第 2 款所列明情况外，学员 / 家长付费后，盟师教育不予退费。</h4>
                </div>
              </div>
              <div className={styles.termContent}>
                <div className={styles.subTerm}>
                  <h4 className={styles.subTermTitle}>如学员高考日语成绩未达到协议约定标准，盟师教育根据保分服务标准进行退款；</h4>
                </div>
              </div>
              <div className={styles.termContent}>
                <div className={styles.subTerm}>
                  <h4 className={styles.subTermTitle}>退费说明：</h4>
                  <div className={styles.subTermContent}>
                    3.1 在进行退费处理时，学员购买课程时赠送的课程、优惠等项目自动取消，学员不得申请折算为现金进行退款。
                  </div>
                  <div className={styles.subTermContent}>
                    3.2 盟师教育有权对退费学员已开具的发票进行作废处理。
                  </div>
                  <div className={styles.subTermContent}>
                    3.3 在进行退费处理时，产生的境外汇款手续费、跨行转账手续费等额外费用，应由学员自行承担。
                  </div>
                  <div className={styles.subTermContent}>
                    3.4 该课程为优惠课程，退费标准将不执行《上海市民办学校退费管理办法》，以本协议约定为准。
                  </div>
                  <div className={styles.subTermContent}>
                    3.5 退费流程：
                  </div>
                  <div className={styles.subTermContent}>
                    （1）在符合以上条件且满足 "保分服务标准" 的情况下，学员 / 家长应当于高考成绩公布之日起三十（30）日内以邮件形式向盟师教育提交可进行高考成绩查询的准考证号等相关信息、考试成绩及退费申请。逾期未提交以上完整资料者视为自动放弃退费。
                  </div>
                  <div className={styles.subTermContent}>
                    （2）辅导费以银行转账方式退还，退费金额以退费费用标准为准，教材及资料费不予退费。
                  </div>
                </div>
              </div>
            </div>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>六、开具发票</h3>
              <div className={styles.termContent}>
                学员在购买该课程后，如需开具发票的，可于个人中心进行申请。
              </div>
            </div>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>七、账户管理</h3>
              <div className={styles.termContent}>
                学员应当妥善保管其在盟师教育申请的账号及密码，不得泄露或出借给任何第三人。学员应当为此组账号及密码之一切活动负责，此账号及密码所为之一切活动即视为学员本身之行为。
              </div>
              <div className={styles.termContent}>
                学员账号及密码仅限于学员本人使用，学员不得出借、出租、出售、移转或让与给其他第三人使用。一经发现，盟师教育有权解除协议并永久封存该账户，盟师教育对此不承担任何责任，如因课程泄露而使盟师教育造成损失的，泄露课程学员需向盟师教育赔偿全部损失。
              </div>
              <div className={styles.termContent}>
                学员注册盟师教育的各类账号，应当使用真实身份信息，不得以虚假、冒用的居民身份信息进行注册。如学员违反前述约定，依据相关法律、法规及国家政策要求，盟师教育有权随时中止或终止学员对盟师教育网络服务的使用且不承担违约责任。盟师教育承诺对获得的学员的个人信息主要为其正常的商业记录分析和客户信息管理及为本协议之目的使用。盟师教育承诺建立健全学员信息安全管理制度、落实技术安全防控措施，对学员使用盟师教育网络服务过程中涉及的学员的个人信息等隐私内容加以严格保密，除非经过学员同意，不会泄漏、转售或与其他机构进行交换。
              </div>
              <div className={styles.termContent}>
                因黑客行为或学员的保管疏忽导致账号、密码遭他人非法使用，盟师教育不承担任何责任。
              </div>
            </div>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>八、知识产权</h3>
              <div className={styles.termContent}>
                盟师教育在教学过程中提供的所有盟师教育以及盟师教育旗下所有 App & 面授过程中使用或提供或显示之软件、程序及内容（包括但不限于面授使用的教学课件 / 资源、视频课程、音频课程、图形课件、文字、说明、图画、图片、图形、课程资源、页面设计、网站规划与安排等）之专利权、著作权、商标权、商业秘密及其他知识产权均属盟师教育或其他权利人所有，受中国法律保护。非经盟师教育以及相关权利人事先书面授权同意，学员不得发布、复制、公开传播、公开播送、公开上映、改作、编辑、转载、链接、引用、抓取、解编、反向破译、通过信息网络传播或用于其他任何商业目的之使用。如有违反，学员应依法承担相应的法律责任，且盟师教育有权终止学员的课程服务，并要求赔偿因此对盟师教育造成的全部损失。
              </div>
            </div>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>九、争议解决</h3>
              <div className={styles.termContent}>
                协议中如有其它未尽事宜，由双方协商解决，协商不成，可提交盟师教育经营者所在地有管辖权法院诉讼解决。
              </div>
            </div>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>十、禁止劝诱</h3>
              <div className={styles.termContent}>
                学员明确了解并同意，盟师教育（及关系企业）的员工、老师、顾问为其公司存续及发展的重要支撑力量，任何人非经盟师教育同意不得进行劝诱。
              </div>
              <div className={styles.termContent}>
                学员同意，在使用盟师教育提供的课程服务过程中及其后，不得唆使、劝诱盟师教育（及关系企业）的员工、老师、顾问与盟师教育终止或解除服务关系，或由学员自己介绍他人予以雇佣（无论正式、兼职、约聘）的任何职务。如有违反，盟师教育还有权终止学员的课程服务，并要求学员承担盟师教育为填补该职位空缺所支出的合理费用，以及向盟师教育承担违约金（以上述人员离职前上一年度年薪或报酬的三（3）倍计算），违约金不足以弥补损失的，盟师教育有权要求学员应予以补足。在前述情形发生时，学员购买课程的费用（无论是否实际使用课程）将不予退还。
              </div>
            </div>
            <div className={styles.terms}>
              <h3 className={styles.termTitle}>十一、其他事宜</h3>
              <div className={styles.termContent}>
                学员在账号使用过程中不得制作、复制、发布、传播含有下列内容的信息：发布不实信息，诽谤他人，扰乱课堂秩序，破坏学习环境的内容；散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的内容；侮辱或者诽谤他人，侵害他人合法权益的内容；干扰或者侵犯盟师教育的正常运行和秩序，影响其他学员正常使用的内容；含有法律、行政法规禁止的其他信息内容的内容。如有违反盟师教育有权永久封存该账号和终止服务。
              </div>
            </div>

            <div className={styles.checkboxWrapper}>
            <Checkbox
              checked={agreed}
              onChange={(checked) => this.setState({ agreed: checked })}
            >
              我已阅读并同意以上协议内容
            </Checkbox>
          </div>
          </div>
        </div>

        {/* 底部操作区 */}
        <div className={styles.footer}>
          <div className={styles.buttons}>
            <Button
              className={styles.backBtn}
              onClick={onBack}
            >
              返回修改
            </Button>
            <Button
              className={styles.submitBtn}
              color='primary'
              disabled={!agreed}
              onClick={agreed ? this.handleSubmit : null}
            >
              {agreed ? '确认提交' : '请阅读协议'}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default Agreement; 